<template>
  <div class="an-box an-page an-tabs-card">
    <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane name="1">
        <template #label>
          <span>
            <i class="el-icon-date"></i> 全部订单
          </span>
        </template>
      </el-tab-pane>
      <el-tab-pane name="2">
        <template #label>
          <span>
            <i class="el-icon-date"></i> 待发货
          </span>
        </template>
      </el-tab-pane>
    </el-tabs>

    <div class="an-body">
      <filter-form @call-back="filterBack" />
      <el-table :data="list" style="width: 100%" :max-height="tabHeight" v-loading="loading">
        <el-table-column prop="id" label="订单编号"></el-table-column>
        <el-table-column prop="totalMoney" label="订单金额(元)">
          <template #default="scope">
            <strong class="text-orange">{{scope.row.totalMoney}}</strong>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="下单时间"></el-table-column>
        <el-table-column prop="consignee" label="收件人"></el-table-column>
        <el-table-column prop="phone" label="收件人手机号"></el-table-column>
        <el-table-column prop="state" label="订单状态">
          <template #default="scope">
            <el-tag
              :type="scope.row.state>0?'success':'info'"
            >{{AUTH.filterState(scope.row.state) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="text" size="small" @click="infoClick(scope.row)">查看</el-button>
            <el-button type="text" size="small" @click="deleteClick(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="an-page-class">
      <el-pagination background layout="prev, pager, next" :total="total" @current-change="getList"></el-pagination>
    </div>
  </div>
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";
import filterForm from "./filterForm/index.vue";
import { Order } from "@/utils/interface";

@Options({
  components: { filterForm },
  props: {
    tab: {
      type: String,
      default: "1",
    },
  },
})
export default class order extends Vue {
  [x: string]: any;
  data() {
    const list: Order[] = [];
    return {
      activeName: this.tab,
      loading: false,
      list,
      total: 0,
      tabHeight: 200,
      getData: {
        page: 1,
        pageSize: 10,
        id: "",
        state: "",
        phone: "",
        startTime: "",
        endTime: "",
      },
    };
  }

  created() {
    this.init();
    this.getList(1);
  }

  // 初始化
  init() {
    let h = document.documentElement.clientHeight || document.body.clientHeight;
    this.tabHeight = h - 280 > 200 ? h - 280 : 200; // 减去页面上固定高度height
  }

  // 页签切换
  handleClick(tab: any) {
    if (tab.paneName == 2) {
      this.getData.state = 1100;
    } else {
      this.getData.state = "";
    }
    this.$router.push({ path: "/order", query: { tab: tab.paneName } });
    this.getList(1);
  }

  // 筛选查询
  filterBack(val: any) {
    this.getData.id = val.number;
    this.getData.phone = val.phone;
    if (val.time && val.time.length > 0) {
      this.getData.startTime = val.time[0];
      this.getData.endTime = val.time[1];
    } else {
      this.getData.startTime = "";
      this.getData.endTime = "";
    }
    this.getList(1);
  }

  getList(page: number) {
    if (page) {
      this.getData.page = page;
    }
    this.loading = true;
    let nd = Object.assign({}, this.getData);
    this.API.orderList(nd).then((res: any) => {
      this.loading = false;
      this.total = res.total;
      this.list = res.records;
    });
  }

  // 查看
  infoClick(row: Order) {
    this.$router.push({ path: "/orderInfo", query: { id: row.id } });
  }

  // 删除
  deleteClick(item: Order) {
    this.$confirm("此操作将永久删除, 是否继续?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        this.API.deleteOrder(item.id).then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.getList(this.getData.page);
        });
      })
      .catch(() => {});
  }
}
</script>

<style lang="scss" scoped>
.an-body {
  padding: 15px;
  position: relative;
}
</style>
